<template>
  <el-form
    ref="addJsonForm"
    :model="addJsonForm"
    :inline="true"
    label-width="108px"
    size="small"
    style="height: 100%"
  >
    <el-table :data="addJsonForm.tableData" style="width: 100%" height="100%">
      <el-table-column
        v-for="item in columnData"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <template slot-scope="scope">
          <template v-if="item.show">
            <component
              :is="item.components"
              v-model="scope.row[item.prop]"
              v-bind="item.config"
            />
          </template>
          <template v-else>
            <template v-if="!scope.row.edit">
              <span>{{ scope.row[item.prop] }}</span>
            </template>
            <template v-else>
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="rules[item.prop]"
              >
                <component
                  :is="item.components"
                  :value="scope.row[item.prop]"
                  v-bind="item.config"
                  @input="changFun"
                />
              </el-form-item>
            </template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.edit">
            <ActionComponent :action-list="editList" :row="scope.row" />
          </template>
          <template v-else>
            <ActionComponent :action-list="viewList" :row="scope.row" />
          </template>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import ActionComponent from "./ActionComponent.vue";
import { cloneDeep } from "lodash";
export default {
  components: {
    ActionComponent
  },
  data() {
    return {
      editList: [
        { text: "保存", config: { type: "text" }, show: true },
        { text: "取消", config: { type: "text" }, show: true, fn: this.close }
      ],
      viewList: [
        {
          text: "",
          config: { icon: "el-icon-edit", type: "text" },
          show: true,
          fn: this.edit
        },
        {
          text: "",
          config: { icon: "el-icon-delete", type: "text" },
          show: true
        }
      ],
      histortData: [],
      addJsonForm: {
        tableData: [
          {
            display: true,
            name: "今天",
            startDate: "2022-1-26",
            color: "red",
            edit: false,
            isToday: true,
            id: "1"
          },
          {
            display: true,
            name: "项目结束时间",
            startDate: "2022-1-28",
            color: "red",
            edit: false,
            id: "2"
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: "请名称", trigger: ["change", "blur"] }
        ]
      },
      columnData: [
        {
          prop: "display",
          label: "显示",
          components: "el-switch",
          config: { size: "small" },
          show: true
        },
        {
          prop: "name",
          label: "名称",
          components: "el-input",
          config: { size: "small", placeholder: "请输入显示名称" },
          width: "220px"
        },
        {
          prop: "startDate",
          label: "时间",
          components: "el-date-picker",
          config: { size: "small", placeholder: "请选择时间" },
          width: "240"
        },
        {
          prop: "color",
          label: "颜色",
          components: "el-color-picker",
          config: { size: "small" }
        }
      ]
    };
  },
  created() {
    this.histortData = cloneDeep(this.addJsonForm.tableData);
  },
  methods: {
    edit(row) {
      this.$set(row, "edit", true);
    },
    close(row) {
      this.$set(row, "edit", false);
    },
    changFun(value) {
      console.log("asdasdsad", value);
    }
  }
};
</script>
